<template>
    <!-- 最新测值总览界面 -->
    <div class="collapse-content">
        <div class="collapse-card">
            <div class="collapse-card-header" @click="toggleBox(1)">
                <div class="collapse-title">
                    <div> <i class="iconfont title-icon">&#xe671;</i>数据展示</div>
                    <div class="describe">
                        <i class="iconfont greenText">&#xe711;</i> 正常
                        <i class="iconfont yellowText">&#xe711;</i> 异常
                        <i class="iconfont redText">&#xe711;</i> 错误
                    </div>
                </div>
            
                <div class="chart-actions">
                    <el-tooltip effect="dark" content="展开/折叠表格" placement="top">
                    <i 
                        class="el-icon-arrow-right expand-icon" 
                        :class="{ 'expanded': activeNames.includes(1) }"
                    ></i>
                    </el-tooltip>
                </div>
            </div>
             <transition name="collapse">
                <div class="right-wrapper-top" v-loading="tableLoading" element-loading-text="数据加载中，请稍后" element-loading-spinner="el-icon-loading" v-show="isTableExpanded">
                    <tableView :tableHeight="tableHeight" isOverview :tableList="tableList" @preview="preview" v-if="tableList.length > 0" :showRoleCheck="0"/>
                    <noData showData v-if="tableList.length == 0" />
                </div>
             </transition>
            
        </div>
        <div class="collapse-card"  style="margin-top:10px">
            <div class="collapse-card-header" @click="toggleBox(2)">
                <div class="collapse-title">
                    <div> <i class="iconfont title-icon">&#xe7a8;</i>过程线展示</div>
                </div>
            
                <div class="chart-actions">
                    <el-tooltip effect="dark" content="展开/折叠图表" placement="top">
                    <i 
                        class="el-icon-arrow-right expand-icon" 
                        :class="{ 'expanded': activeNames.includes(2) }"
                    ></i>
                    </el-tooltip>
                </div>
            </div>
            <transition name="collapse">
                <div class="right-wrapper-bot" v-show="isChartExpanded" v-loading="chartLoading" element-loading-text="图形加载中，请稍后" element-loading-spinner="el-icon-loading">
                    <noData showChart v-if="chartData == null" description="暂无过程线"/>
                    <chartLine v-show="chartData != null" :chartData="chartData" :field="field" :watchTime="watchTime" height="236px" ref="chartRef"/>
                </div>
            </transition>
        </div>
    </div>

</template>
<script>
import {getMonitoringTransformData,transformDataImages} from "@/api/https";
import noData from '../../base/noData.vue'
import TableView from './TableView.vue';
import chartLine from '@/components/base/chartLine.vue'
export default {
    name:'Overview',
    props:{
        stationId:{
            type:[String,Number],
            default:''
        },
    },
    components:{noData,TableView,chartLine},
    data() {
        return {
            tableHeight:'calc(100vh - 500px)',
            tableLoading:false,
            chartLoading:false,
            tableList:[],
            chartData:null,
            watchTime:null,
            field:null,
            activeNames: [1,2]
        }
    },
    mounted(){
        this.getTableList();
    },
    deactivated(){
       this.clearChart()
    },
    activated(){
      if(this.chartData){
        this.updateChart()
      }
    },
    beforeDestroy() {
        this.$refs.chartRef?.cleanupChart();
        this.chartData = null;
        this.tableList = [];
    },
    watch:{
        'stationId':{
            handler(newVal, oldVal) {
                if (newVal && newVal !== oldVal && oldVal != undefined) {
                    this.clearData();
                    this.getTableList();
                }
            },
            immediate: true
        }
    },
    computed: {
        isTableExpanded() {
            return this.activeNames.includes(1);
        },
        isChartExpanded() {
            return this.activeNames.includes(2);
        }
    },
    methods: {
        toggleBox(num) {
            const index = this.activeNames.indexOf(num);
            if (index > -1) {
                this.activeNames.splice(index, 1);
            } else {
                this.activeNames.push(num);
            }
            this.adjustTableHeight();
        },
        adjustTableHeight() {
            const hasTable = this.isTableExpanded;
            const hasChart = this.isChartExpanded;
            
            if (hasTable && !hasChart) {
                this.tableHeight = 'calc(100vh - 245px)';
            } else if (!hasTable && hasChart) {
                
            } else {
                this.tableHeight = 'calc(100vh - 500px)';
            }
        },
        clearData(){
            this.tableList = []
            this.tableLoading = false
            this.chartLoading = false
            this.chartData = null
        },
        getTableList() {
            if (this.tableLoading || this.chartLoading) return;
            this.tableLoading = true
            this.chartLoading = true
            getMonitoringTransformData({
                stationID:this.stationId,
                timeSequence:'倒序',
                outliersign:''
            }).then(res=>{
                if(res.isSuccess){
                    if (res.data && res.data.length > 0) {
                        this.tableList = [...res.data]
                        this.tableLoading = false
                        this.getChartLineData(this.tableList[0].code_ID,this.tableList[0].compname)
                    }else{
                        this.clearData()
                    }
                }else{
                    this.clearData()
                    this.$message.error(res.errorMessage)
                }
            })
            
        },
        getChartLineData(code,comp){
            transformDataImages({
                code_id:code,
                comp:comp,
                valueType:6,
            }).then(res=>{
                if(res.isSuccess){
                   if (res.data && res.data.valueData != null) {
                      this.chartData = {...res.data}
                      this.watchTime = null
                      this.field = null
                    }else{
                        this.chartData = null
                    }
                    this.chartLoading =false
                }else{
                    this.chartData = null
                    this.chartLoading = false
                    this.$message.error(res.errorMessage)
                }
            })
        },
        preview(row,column) {
          const time = row.watchTime.split(' ')
          if(column.title == '测值结果'){
            this.chartLoading = true
            this.watchTime = time[0]
            this.field = row[column.field]
            this.$nextTick(()=>{
                this.getChartLineData(row.code_ID, row.compname);
            })
          }
        },
        clearChart() {
            this.$refs.chartRef?.clearChart();
        },
        
        updateChart() {
           this.$refs.chartRef?.updateChart();
        }
    },
}
</script>

<style scoped lang="scss">
::v-deep .ico{
    font-size: 20px !important;
    vertical-align: middle !important;
}
::v-deep .result{
    i{
        margin-right: 8px;
        font-size: 14px;
    }
}

</style>